import React, {Component} from 'react';
import {
  Alert,
  Form,
  Checkbox,
  Tooltip,
  Radio,
  Button,
  Icon,
  Row,
  Col
} from 'antd';
import {StoreProvider} from 'iflux2'

import AppStore from './store'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const layoutProps = {
  labelCol: { 
    span: 6 
  },
  wrapperCol: { 
    span: 18 
  }
}
@StoreProvider(AppStore)
export default class RegisterLogin extends Component{
  componentDidMount() {
    this.props.store.init();
  }
  render() {
    let {mobile_login, username_mobile_login, username_reg} = this.props.store.state().toJS();
    return (
      <div className="registerlogin-set">
         <Alert message={"注册方式单选；登录方式组合选择。使用注册方式“绑定手机号码、登录名+登录密码、短信验证码登录”、登录方式“绑定手机号码+短信验证码登录”将扣除商家短信条数，请慎重选择。不建议使用注册方式“登录名注册”+登录方式“绑定手机号码+短信验证码登录”组合方式。"} type="info"/>
         <Form>
          <FormItem label="注册方式" {...layoutProps}>
            <RadioGroup value={username_reg} onChange={this.onSetting}>
              <Radio value="1">登录名注册</Radio>
              <Tooltip placement="bottom" title={"用户通过创建登录名+设置登录密码方式注册"}>
                <span className="help-tips">
                  <Icon type="info-circle"/>
                </span>
              </Tooltip>
              <br/>
              <Radio value="0">绑定手机号码、登录名+登录密码、短信验证码注册</Radio>
              <Tooltip placement="bottom" title={"用户通过设置登录名+绑定手机号码以及设置登录密码方式注册"}>
                <span className="help-tips">
                  <Icon type="info-circle"/>
                </span>
              </Tooltip>
            </RadioGroup>
          </FormItem>
          <FormItem label="登陆方式" {...layoutProps}>
            <div>
              <Checkbox name="username_mobile_login" checked={username_mobile_login == 1} onChange={this.onSetting}>登录名/绑定手机号码+登录密码</Checkbox>
              <Tooltip placement="bottom" title={"用户通过登录名/绑定的手机号+登录密码方式登录"}>
                <span className="help-tips">
                  <Icon type="info-circle"/>
                </span>
              </Tooltip>
            </div>
            <div>
              <Checkbox name="mobile_login" checked={mobile_login == 1} onChange={this.onSetting}>绑定手机号码+短信验证码登录</Checkbox>
              <Tooltip placement="bottom" title={"用户通过绑定的手机号+短信验证码方式登录"}>
                <span className="help-tips">
                  <Icon type="info-circle"/>
                </span>
              </Tooltip>
            </div>
          </FormItem>
         </Form>
         <Row>
          <Col span="6"></Col>
          <Col span="18">
            <Button type="primary" onClick={this.props.store.onSave}>保存</Button>
          </Col>
        </Row>
      </div>
    )
  }
  onSetting = (e) => {
    let {name, checked, value} = e.target;
    let {onSetting} = this.props.store;
    if(!name){
      onSetting({username_reg: value});
    }else{
      onSetting({[name]: checked ? 1 : 0})
    }
  }
}